<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      header-cell-class-name="tableHead"
    >
      <el-table-column
        prop="name"
        label="站点名称"
        width="180"
      />
      <el-table-column
        prop="date"
        label="月报警"
        width="600"
      >
        <template slot-scope="scope" style="width: 100%;">
          <div class="handleBox">
            <template v-if="scope.row.text">
              <div> {{ scope.row.date }}</div>
              <div>
                <img src="@/assets/device/edit.png" @click="choseTable(scope.row)">
              </div>
            </template>
            <template v-else>
              <el-input v-model="scope.row.date" />
              <div @click="saveTable(scope.row,scope.$index)">保存</div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="监测点数量"
        width="180"
      >
        <template slot-scope="scope">
          <div class="switch_box">
            <el-switch
              v-model="scope.row.switchVal"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="上线日期"
      >
        <template slot-scope="scope">
          <div class="delete" @click="deleteTable(scope.row,scope.$index)">删除</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'devices.typeDelimit',
  components: {
  },
  props: {
    choseData: {
      type: Object,
      required: {}}
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎0',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎1',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎2',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎3',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {
    console.log(this.choseData)
  },
  methods: {
    choseTable(data) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].text = true
      }
      data.text = false
    },
    saveTable(data, index) {
      console.log(index)
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].text = true
      }
    },
    deleteTable(data, index) {
      console.log(index)
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
 /deep/ .tableHead{
    background-color: #EDF1F8!important;
  }
.handleBox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  &>div:nth-child(2){
    flex-shrink: 0;
    margin-left: 23px;
    font-size: 15px;
    color: #707070;
    &>image{
      width: 20px;
      height: 22px;
    }
  }
  &>.el-input{
    // padding-left: 0;
    &> /deep/ input{
      padding-left: 0;
    }
  }
}
.delete{
 font-size: 15px;
 color: #5595FF;
 cursor: pointer;
}
.switch_box{
  display: flex;
  align-items: center;
  justify-content: center;
}
 /deep/ .cell{
    width: 100%;
    height: 100%;
    text-align: center;
  }

</style>
